<template>
  <div class="channel-edit">
    <van-cell center :border="false">
      <div slot="title" class="channel-title">我的频道</div>
      <van-button
        round
        plain
        type="danger"
        size="mini"
        hairline
        @click="isEdit = !isEdit"
      >{{ isEdit ? '完成' : '编辑' }}</van-button>
    </van-cell>
    <van-grid :gutter="10">
      <van-grid-item
        class="grid-item"
        :class="{active: index === active}"
        :icon="(isEdit && index !== 0 )? 'clear' : '' "
        v-for="(channel,index) in userChannels"
        :key="index"
        :text="channel.name"
        @click="onUserChannelClick(channel,index)"
      />
    </van-grid>
    <van-cell center :border="false">
      <div slot="title" class="channel-title">频道推荐</div>
    </van-cell>
    <van-grid :gutter="10">
      <van-grid-item
        class="grid-item"
        v-for="(channel,index) in recommendChannels"
        :key="index"
        :text="channel.name"
        @click="onAdd(channel)"
      />
    </van-grid>
  </div>
</template>

<script>
  import { getAllChannels,addUserChannel,deleteUserChannel } from '@/api/channel'
  import { mapState } from 'vuex'
  import { setItem }  from '@/utils/storage'

  export default {
   name: 'ChannelEdit',
	 components:{},
	 props:{
     userChannels:{
       type:Array,
       required:true
     },
     active:{
       type:Number,
       required:true
     }
   },
   data () {
       return {
         allChannels: [], //所有频道数据列表
         isEdit:false, //控制编辑状态显示
       }
     },
	 computed: {
     ...mapState(['user']),
     //推荐的频道列表
     recommendChannels () {
       //所有频道 - 我的频道 = 推荐频道
       //filter方法：过滤数据，根据方法返回的布尔值true来收集数据
       //filter方法查找满足条件的所有元素
       return this.allChannels.filter(channel => {
         //判断channel 是否属于用户频道
         //find方法查找满足条件的单个元素
         return !this.userChannels.find(userChannel => {
           //找到满足该条件的元素
           return userChannel.id === channel.id
         })
       })

     //第二种方法
     // const arr = []
     // //遍历所有频道
     // this.allChannels.forEach(channel => {
     //   let flag = false
     //   for (let i = 0;i < this.userChannels.length; i++) {
     //     if (this.userChannels[i].id === channel.id){
     //       flag = true
     //       break
     //     }
     //   }
     //   if(!flag) {
     //     arr.push(channel)
     //   }
     // })

     // return arr
     }
   },
	 watch: {},
	 created () {
     this.loadAllChannels()
   },
	 mounted() {},
   methods:{
     async loadAllChannels () {
       const { data } = await getAllChannels()
       this.allChannels = data.data.channels
     },

     async onAdd(channel){
       this.userChannels.push(channel)

       //数据持久化
       if(this.user) {
          //登录了，数据存储到线上
          await addUserChannel({
            channels: [
              { id:channel.id, seq:this.userChannels.length }
            ]
          })
       } else {
          //没有登录，数据存储到本地
          setItem('user-channels',this.userChannels)
       }
     },

     onUserChannelClick (channel,index) {
       if (this.isEdit && index !== 0) {
         //编辑状态，删除频道
         this.deleteChannel(channel,index)
       } else {
         //非编辑状态，切换频道
         this.switchChannel(index)
       }
     },

     async deleteChannel(channel,index){
       //如果删除的是当前激活频道之前的频道
       if(index <= this.active){
         //更新激活频道的索引
         this.$emit('update-active',this.active - 1)
       }
       this.userChannels.splice(index,1)

       //数据持久化
       if(this.user) {
         //登录了，持久化到线上
         await deleteUserChannel(channel.id)
       }else{
         //没有登录，持久化到本地
         setTime('user-channels',this.userChannels)
       }
     },

     switchChannel(index){
       //切换频道
        this.$emit('update-active',index)

      //关闭弹出层
        this.$emit('close')
     }
   }
  }
</script>

<style scoped lang="less">
  .channel-edit{
    padding-top:54px;

    .van-button--danger{
      padding:0 10px;
    }

    .channel-title{
      font-size:16px;
      color:#333333;
    }

    .grid-item{
      width:80px;
      height:43px;
      /deep/ .van-grid-item__content{
        background-color:#f4f5f6;
        .van-grid-item_text{
          font-size:14px;
          color:#222;
          margin-top: 0;
        }
      }
      /deep/ .van-grid-item__icon{
        position:absolute;
        right:-5px;
        top:-5px;
        color:#ccc;
        font-size:20px;
      }
    }

    .active{
      /deep/ .van-grid-item__text {
        color:red;
      }
    }
  }
</style>
